<template>
	<view class="university">
		<view class="university_search">
			<input type="text" v-model="schoolName" placeholder="请输入您所要查询的大学" />
			<button @click="tips()" type="primary">查询</button>
		</view>
		<view class="showSchool" v-for="(item,index) in schoolInfo " :key="index">
			<view class="item">{{item.school_name}}</view>
			<view class="item">{{item.school_level}}</view>
			<view class="item">{{item.school_city}}</view>
			<view class="item">{{item.school_province}}</view>
			<view class="item">
				<navigator :url='"/components/web-view/web-view?website="+item.school_website'>访问官网</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				schoolName: "",
				schoolInfo:[]
			}
		},
		methods: {
			// 提示输入内容不能为空
			tips() {
				if (this.schoolName !== '') {
					this.getContent();
				} else {
					uni.showToast({
						title: '不能为空哟',
						icon: 'none'
					});
				}
			},
			async getContent() {
				const res = await this.$myRequest({
					url: "/?&s=App.Common_University.Search",
					method: "post",
					data: {
						school_name: this.schoolName,
						app_key: "FF119DFB40E63EE8DFD7C74C8A9A4B8D"
					}
				})
				const schoolInfo = res.data.data.schools;
				if(schoolInfo.length !== 0){
					this.schoolInfo =schoolInfo
				}else{
					uni.showToast({
						title: '无搜索结果',
						icon: 'none'
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.university_search {
		width: 85%;
		height: 80rpx;
		display: flex;
		margin: 30rpx auto;

		input {
			border: 1rpx solid #eee;
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-right: 10rpx;
			border-radius: 20rpx;
		}

		button {
			height: 100%;
			border: none;
			line-height: 80rpx;
		}
	}

	.showSchool {
		position: relative;
		height: 700rpx;
		margin: 80rpx 0;
		.item {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			position: absolute;
			text-align: center;
			line-height: 150rpx;
		}

		.item:nth-child(1) {
			width: 300rpx;
			height: 300rpx;
			line-height: 300rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			box-shadow: 0px 1px 8px #DD524D;
			
		}

		.item:nth-child(2) {
			left: 50%;
			transform: translateX(-50%);
			box-shadow: 0px 1px 8px #007AFF;
		}

		.item:nth-child(3) {
			top: 20%;
			left: 10%;
			box-shadow: 0px 1px 8px #F0AD4E;
		}

		.item:nth-child(4) {
			box-shadow: 0px 1px 8px #808080;
			top: 20%;
			right: 10%;
		}

		.item:nth-child(5) {
			width: 100rpx;
			height: 50rpx;
			border-radius: 10rpx;
			line-height: 50rpx;
			top: 65%;
			left: 50%;
			transform: translateX(-50%);
			box-shadow: 0px 1px 8px #4CD964;
			background-color: #fff;
		}
	}
</style>
